웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
웹페이지 HTML에 사용되는 <base> 태그에 대하여 알아봅니다.
<base href="/images/" target="_blank" />
사용 가능한 어트리뷰트는 다음과 같습니다.
href // base 값인 url/uri를 설정
target // 링크 등이 동작할 때 방식을 선언
href는 base 값을 의미합니다. 그리고 target의 경우 링크 사용시 target을 설정하는데요... 동작은 동일합니다. _blank, _self 등의 값을 사용할 수 있으며 _blank로 사용하는 경우 해당 웹페이지의 링크를 클릭하면 항상 새로운 창에서 동작하게 됩니다.
! base 태그 사용시 주의할 점
base 태그를 적용할 경우 반드시 <head> 태그 영역 안에 사용하여야하며 또한 중복된 base 태그는 설정할 수 없습니다. 즉 하나만 사용가능합니다. 일반적으로 head 내부에서도 최상단에 선언, 위치합니다.
! base 태그 예제
아래와 같은 base 태그와 값이 설정된 경우가 존재한다고 합니다. 이 경우 링크 값은 어떻게 바뀌게 될까요?
위 a 태그의 href 값은 ./test2/로 되어 있습니다. 이 경우 /test2/를 사용하면 base 태그의 값이 적용되지 않으며 앞의 /를 제외하거나 .을 추가하여 ./으로 사용해야하니 참고하세요.
클릭할 경우 아래의 경로로 이동하게 됩니다.
또한 단순 링크 뿐만 아니라 내부에 선언된 css 링크, 이미지 등도 동일하게 base값이 적용되게 됩니다.
base 태그는 거의 모든 브라우저에서 호환됩니다.
# HTML base 태그는?
base 태그는 head 안에서 선언된 것을 볼 수 있는데요 ~ base 태그를 사용하면 기준이 되는 base url/uri를 설정하여 사용할 수 있습니다. 여기서 base url/uri는 링크 주소 등을 만들 경우 특정 값이 자동으로 추가되는 것과 같습니다. 간단하게 예를들어 base에 /images/라고 미리 설정해두는 경우 이미지를 불러오거나 링크에 사용되는 경로 앞에 /images/를prefix처럼 붙을 수 있도록 하는 것이 가능합니다.<base href="/images/" target="_blank" />
사용 가능한 어트리뷰트는 다음과 같습니다.
href // base 값인 url/uri를 설정
target // 링크 등이 동작할 때 방식을 선언
href는 base 값을 의미합니다. 그리고 target의 경우 링크 사용시 target을 설정하는데요... 동작은 동일합니다. _blank, _self 등의 값을 사용할 수 있으며 _blank로 사용하는 경우 해당 웹페이지의 링크를 클릭하면 항상 새로운 창에서 동작하게 됩니다.
! base 태그 사용시 주의할 점
base 태그를 적용할 경우 반드시 <head> 태그 영역 안에 사용하여야하며 또한 중복된 base 태그는 설정할 수 없습니다. 즉 하나만 사용가능합니다. 일반적으로 head 내부에서도 최상단에 선언, 위치합니다.! base 태그 예제
아래와 같은 base 태그와 값이 설정된 경우가 존재한다고 합니다. 이 경우 링크 값은 어떻게 바뀌게 될까요?<head>
<base href="https://webisfree.com/test/">
</head>
<a href="./test2/">Click</a>
<base href="https://webisfree.com/test/">
</head>
<a href="./test2/">Click</a>
위 a 태그의 href 값은 ./test2/로 되어 있습니다. 이 경우 /test2/를 사용하면 base 태그의 값이 적용되지 않으며 앞의 /를 제외하거나 .을 추가하여 ./으로 사용해야하니 참고하세요.
- /test/ (X)
- ./test/ (O)
- test/ (O)
클릭할 경우 아래의 경로로 이동하게 됩니다.
https://webisfree.com/test/test2/
또한 단순 링크 뿐만 아니라 내부에 선언된 css 링크, 이미지 등도 동일하게 base값이 적용되게 됩니다.
base 태그는 거의 모든 브라우저에서 호환됩니다.
아래의 글도 찾고 계시지 않나요?
